<template>
  <div class="resume">
    <van-notify id="van-notify" />
    <van-cell-group>
      <van-field
        required
        clearable
        label="姓名"
        :value="nameContent"
        icon="manager-o"
        placeholder="请输入用户名"
        @change="nameChange"
      />
      <van-field
        required
        clearable
        label="性别"
        icon="arrow"
        placeholder="请选择性别" :value="sexContent" @click="sex"
      />
        <van-popup :show="sexShow" position="bottom" :overlay="true">
        <van-picker show-toolbar title="请选择性别" :columns="sexArray"  @change="sexChange" @cancel="sexCancel" @confirm="sexConfirm"/>
        </van-popup>
      <van-field
        required
        clearable
        label="工作经验"
        icon="arrow"
        placeholder="请选择工作经验" :value="jobContent" @click="job"
      />
      <van-popup :show="jobShow" position="bottom" :overlay="true">
        <van-picker show-toolbar title="请选择工作经验" :columns="jobArray"  @change="jobChange" @cancel="jobCancel" @confirm="jobConfirm"/>
      </van-popup>
      <van-field
        required
        clearable
        label="身份"
        icon="arrow"
        placeholder="请选择身份" :value="cardContent" @click="card"
      />
      <van-popup :show="cardShow" position="bottom" :overlay="true">
        <van-picker show-toolbar title="请选择身份" :columns="cardArray"  @change="cardChange" @cancel="cardCancel" @confirm="cardConfirm"/>
      </van-popup>
      <van-field
        required
        clearable
        label="联系方式"
        icon="arrow"
        :value="telContent"
        placeholder="请输入手机号"
        @change="telChange"
      />
      <van-field
        required
        clearable
        :value="structContent"
        @change="structChange"
        label="自我介绍"
        icon="arrow"
        placeholder="简介（不少于20字）"
      />
      <van-field
        disabled
        required
        clearable
        label="每日工作时间"
        icon="arrow"
        :placeholder="courseContent"
        @click="toCourse"
      />
      <van-field
        clearable
        required
        label="期待薪资"
        placeholder="您的期待薪资"
        use-stepper-slot
        disabled
        :value="payContent"
      >
        <van-stepper slot="button" :value="payContent" integer @change="payChange">发送验证码</van-stepper>
      </van-field>
      <van-field
        clearable
        required
        label="每日工作时长"
        placeholder="您的工作时长"
        use-stepper-slot
        disabled
        :value="timeContent"
      >
        <van-stepper slot="button" :value="timeContent" integer @change="timeChange">发送验证码</van-stepper>
      </van-field>
      <van-field
        required
        clearable
        label="地址"
        :value="dizhiContent"
        placeholder="请输入地址"
        @change="dizhiChange"
      >
        <div slot="button" @click="dizhi">
          选择地址
        </div>
      </van-field>
      <van-popup :show="dizhiShow" position="bottom" :overlay="true">
        <van-area :area-list="areaList" title="省市选择"  @change="ondizhiChange" @confirm="ondizhiConfirm" @cancel="ondizhiCancel"/>
      </van-popup>

    </van-cell-group>
    <button class='eva_btn' @click="TiJiaoStudent">提交</button>
  </div>
</template>

<script>
  // import picker from "/static/vant/picker/index"
  // import Notify from '@/../static/vant/notify/notify'
  import Notify from '@/../static/vant/notify/notify'
  import areaList  from '@/../static/js/area'
const card = {
  "本科生": ["大一", "大二", "大三", "大四"],
  "研究生": []
};


export default {
  data () {
    return {
      areaList,
      dizhiContent: '',
      dizhiShow: false,
      nameContent: '',
      structContent: '',
      payContent: 10,
      timeContent: 3,
      // courseContent: '',
      telContent: '',
      courseStorage: '',
      sexShow: false,
      sexContent: "男",
      sexArray: ["男", "女"],
      jobShow: false,
      jobContent: "有",
      jobArray: ["有", "无"],
      cardShow: false,
      cardContent: "本科生大二",
      cardArray: [
        {
          values: Object.keys(card),
          className: "column1"
        },
        {
          values: card['本科生'],
          className: "column2",
          defaultIndex: 1
        }
      ],

      courseShow: false
    }
  },
  computed: {
    // 计算course属性
    courseContent: function () {
       var that = this
      wx.getStorage({
        key: 'courseShow',
        success:res=> {
          console.log(res.data)
          if(res.data === true){
            that.courseStorage= "已导入课表"
          }else{
            that.courseStorage= "请导入课表"
          }
        },
        fail: ()=> {
          // console.log(that.courseStorage)
          console.log('失败')
          that.courseStorage= "请导入课表"

        }
      })
      // console.log(course)
      return that.courseStorage
    }
  },
  methods: {
    /*
    提交学生信息
    */
    TiJiaoStudent(){
      var student = new Object();
      student.Myname = this.nameContent;
      student.appid = "12345";
      student.Type = this.cardContent;
      student.Experience = this.jobContent;
      student.userPhone = this.telContent;
      student.userAddress = this.dizhiContent
      student.Worktime = this.timeContent;
      student.userSex = this.sexContent;
      student.Introduction = this.structContent;
      student.Salary = this.payContent;
      var telreg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if(telreg.test(this.telContent)){
        // console.log(this.telContent)
        // console.log(telreg.test(this.telContent))
        // console.log('手机号验证通过')
      }else {
        Notify({
          message: '手机号码输入有误，请重新输入',
          // message: a,
          type: 'warning',
          duration: 1500,
        });
        console.log('手机号验证没通过')
        return
      }
      var jieShao  = /[\w\W]{20,}/;
      // console.log(this.structContent)
      if(jieShao.test(this.structContent)){

      }else {
        // console.log(jieShao.test(this.structContent))
        Notify({
          message: '介绍少于20字，请继续添加',
          // message: a,
          type: 'warning',
          duration: 1500,
        });
        return
      }
      wx.request({
        url: 'http://mock.studyinghome.com/mock/5e606e87597ac8103c472ce2/HeiJob/main/myinformation/change', //仅为示例，并非真实的接口地址
        data: {
          student: student
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {

          if(res.data.message == "success"){
            Notify({
              message: '提交成功~~~',
              // message: a,
              type: 'primary',
              duration: 1500,
            });
          }else {
            Notify({
              message: res.data.message,
              // message: a,
              type: 'warning',
              duration: 1500,
            });
          }
        },
        fail(){
          console.log("失败")
        }
      })
    },
    toCourse(){
      wx.navigateTo({
        url: "/pages/course/main"
      })
    },
    telChange(event){
      this.telContent = event.mp.detail
    },
    dizhiChange(event){
      this.dizhiContent = event.mp.detail
    },
    payChange(event){
      // console.log(event.mp)
      // console.log(event.mp.detail)
      this.payContent = event.mp.detail
    },
    timeChange(event){
      // console.log(event.mp)
      // console.log(event.mp.detail)
      this.timeContent = event.mp.detail
    },
    structChange(event){
      // console.log()
      this.structContent=event.mp.detail
      // console.log(this.nameContent)
    },
    nameChange(event){
      // console.log()
      this.nameContent=event.mp.detail
      // console.log(this.nameContent)
    },
    sex(){
      this.sexShow = true
    },
    dizhi(){
      this.dizhiShow = true
    },
    sexChange (event) {
      this.sexContent = event.target.value
    },
    sexCancel(){
      this.sexShow = false
    },
    sexConfirm(){
      this.sexShow = false
    },
    job(){
      this.jobShow = true
    },
    jobChange (event) {
      this.jobContent = event.target.value
    },
    jobCancel(){
      this.jobShow = false
    },
    jobConfirm(){
      this.jobShow = false
    },
    card(){
      this.cardShow = true
    },
    cardChange (event) {
      // console.log(citys["福建"])
      // console.log()
      // console.log(event.mp.detail.picker.getValues()[0])
      this.cardArray[1].values = card[event.mp.detail.picker.getValues()[0]]
      // event.mp.detail.picker.setColumnValues(1, card[event.mp.detail.picker.getValues()[0]])
      // console.log(event.mp)
      if(event.mp.detail.value[0] == "研究生"){
        this.cardContent = event.mp.detail.value[0]
      }else{
        if(event.mp.detail.value[1] === undefined){
          this.cardContent = event.mp.detail.value[0] + "大一"
        }else{
          this.cardContent = event.mp.detail.value[0] + event.mp.detail.value[1]
        }
      }

    },
    cardCancel(){
      this.cardShow = false
    },
    cardConfirm(){
      this.cardShow = false
    },
    ondizhiCancel(){
      this.dizhiShow = false

    },
    ondizhiConfirm(mp){
      console.log(mp.mp.detail)
      this.dizhiContent = mp.mp.detail.values[0].name + " " + mp.mp.detail.values[1].name + " " + mp.mp.detail.values[2].name;
      this.dizhiShow = false//关闭弹框
    },
    /*
    student信息显示
     */
    studentinfoshow(student){
      console.log('studentinfoshow'+ student)
      this.nameContent = student.Myname;
      this.structContent = student.Introduction
      this.sexContent = student.userSex;
      this.jobContent = student.Experience;
      this.cardContent = student.Type;
      this.telContent = student.userPhone;
      this.timeContent = student.Worktime;
      this.payContent = ""+student.Salary;
      this.dizhiContent = student.userAddress;
    }
},
  onShow(){
    /*
    获取每个学生的个人信息，并展示在界面上
     */

    var that = this;
    wx.request({
      url: 'http://47.107.120.160/HeiJob/main/myinformation', //仅为示例，并非真实的接口地址
      data: {
        UserID: '1'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res.data)
        // var student = new Object()
        // console.log(res.data.message)
        var student = new Object();
        if(res.data.message == "success"){
          // for(let key  in res.data.data){
          // //   console.log(res.data.data.Userinformation)
          // //   console.log(key)
          // //   student.key = res.data.data.Userinformation[key];
          //   console.log(student.key)
          // }
          student = res.data.data
          // console.log("studentinfonnnn"+ student)
          // console.log(student)
          wx.setStorage({
            key:"studentinfo",
            data: student
          })
          console.log(student)
          that.studentinfoshow(student);
        }else {
          Notify({
            message: '获取失败',
            // message: a,
            type: 'warning',
            duration: 1500,
          });
        }
      },
      fail(){
        console.log("失败")
      }
    })

    this.courseShow = wx.getStorageSync('courseShow')
  }

}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.resume
  .star
    span
      display inline-block
      font-size 20rpx
.eva_btn
  width 600rpx
  height 80rpx
  line-height 80rpx
  font-size 30rpx
  color #fff
  background #1296DB
  position fixed
  left 75rpx
  bottom 37rpx
</style>
